<template>
    <div ref="katexContainer"></div>
  </template>
  
  <script>
  import { onMounted, ref, watch } from 'vue';
  import katex from 'katex';
  import 'katex/dist/katex.min.css'; // 引入 KaTeX 样式
  
  export default {
    props: {
      formula: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const katexContainer = ref(null);
  
      const renderKatex = () => {
        if (katexContainer.value) {
          katex.render(props.formula, katexContainer.value, {
            throwOnError: false, // 忽略错误
          });
        }
      };
  
      // 监听 formula 变化
      watch(() => props.formula, renderKatex);
  
      // 初始化渲染
      onMounted(renderKatex);
  
      return {
        katexContainer,
      };
    },
  };
  </script>